<template>
  <div>
    <div>加法运算</div>
    {{ change }}
    <div>计算属性:{{ num }}</div>
    <div>原始的{{ name }}</div>
    <button @click="adda(1)">+1</button>
    <button @click="asyncadda(2)">异步+2</button>
    <button @click="change1">点击变身</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  // 暴露的数据和侦听器定义在计算属性中
  computed: {
    ...mapState({
      // 注意用对象的形式给num和name赋值页面中的数据才能显示
      num: (state) => state.a.num,
      name: (state) => state.b.name
    }),
    ...mapGetters(['change'])
  },
  // 方法和异步操作放在方法中
  methods: {
    // 注意用对象的形式给方法从新定位,防止找不到该方法且无法使用该方法报错
    // ...mapMutations({'adda':'a/adda'},{ 'change1':'b/change1'}),

    ...mapMutations(['adda', 'change1']),
    ...mapActions(['asyncadda'])
  }
}
</script>

<style lang="less" scoped></style>
